<template>
	<view class="flow-box">
		<!-- 数据内容 -->
		<view class="flow-data left-top-data">
			<view class="percent">{{
          (Math.floor((allActivePower / capacity) * 100) / 100) * 100}}%</view>
			<view class="num">{{ allActivePower == '' ? '--' : (allActivePower/1000).toFixed(2) }}KWh</view>
		</view>
		<view class="flow-data left-bottom-data">
			<view class="num">--KWh</view>
			<!-- <view class="percent">--%</view> -->
		</view>
		<view class="flow-data right-top-data">
			<!-- <view class="percent">--%</view> -->
			<view class="num">{{ rfpFKwh }}KWh</view>
		</view>
		<view class="flow-data right-bottom-data">
			<view class="num">{{ allPower - rfpFKwh }}KWh</view>
			<!-- <view class="percent">--%</view> -->
		</view>
		<view class="flow-bottom-data">
			<view class="bottom-item left">
				<view class="title">装机容量</view>
				<view class="num">{{ capacity || "--" }}KWh</view>
			</view>
			<view class="bottom-item right">
				<view class="title">发电功率</view>
				<view class="num">{{ allActivePower == '' ? '--' : (allActivePower/1000).toFixed(2) || "--" }}KWh</view>
			</view>
		</view>
		<!-- 流程动图 -->
		<view class="flow-container">
			<view class="left-top flow-item">
				<image src="@/static/svg/left-top2.svg" class="img" />
				<view class="left-top-move move-item"></view>
			</view>
			<view class="right-top flow-item">
				<image src="@/static/svg/right-top2.svg" class="img" />
				<view class="right-top-move move-item"></view>
			</view>
			<view class="left-bottom flow-item">
				<image src="@/static/svg/left-bottom2.svg" class="img" />
				<view class="left-bottom-move move-item"></view>
			</view>
			<view class="right-bottom flow-item">
				<image src="@/static/svg/right-bottom2.svg" class="img" />
				<view class="right-bottom-move move-item"></view>
			</view>
			<!-- 左上 发电 -->
			<text class="flow-icon left-top-icon">
				<text class="iconfont icon-gongshuai"></text>
			</text>
			<!-- 左下 电池 -->
			<text class="flow-icon left-bottom-icon">
				<text class="iconfont icon-dianchi"></text>
			</text>
			<!-- 右上 电网 -->
			<text class="flow-icon right-top-icon">
				<text class="iconfont icon-ganta-2"></text>
			</text>
			<!-- 右下 电率 -->
			<text class="flow-icon right-bottom-icon">
				<text class="iconfont icon-yongdiangongshuai"></text>
			</text>
			<!-- 中间 发电板 -->
			<text class="flow-icon center-icon">
				<text class="iconfont icon-fadianzhan"></text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			capacity: {
				type: String,
				default: "--",
			},
			allActivePower: {
				type: String,
				default: "--",
			},
			rfpFKwh: {
				type: String,
				default: "--",
			},
			allPower: {
				type: String,
				default: "--",
			},
		},
		mounted() {},
	}
</script>

<style lang="scss" scoped>
	// 左上 left-top-move
	@keyframes leftTopMove {

		0%,
		65% {
			left: -50%;
			top: 12%;
		}

		80% {
			left: 48%;
			top: 12%;
		}

		90% {
			left: 48%;
			top: 80%;
		}

		100% {
			left: 100%;
			top: 80%;
		}
	}

	@keyframes leftTopMove_back {
		0% {
			left: 100%;
			top: 80%;
		}

		25% {
			left: 48%;
			top: 80%;
		}

		65% {
			left: 48%;
			top: 10%;
		}

		100% {
			left: 0;
			top: 10%;
		}
	}

	//左下 left-bottom-move
	@keyframes leftBottomMove {

		0%,
		65% {
			left: -51%;
			bottom: 12%;
		}

		80% {
			left: 51%;
			bottom: 12%;
		}

		90% {
			left: 51%;
			bottom: 80%;
		}

		100% {
			left: 100%;
			bottom: 80%;
		}
	}

	//右上 right-top-move
	@keyframes rightTopMove {
		0% {
			right: 0;
			top: 10%;
		}

		25% {
			right: 48%;
			top: 10%;
		}

		65% {
			right: 48%;
			top: 80%;
		}

		100% {
			right: 100%;
			top: 80%;
		}
	}

	@keyframes rightTopMove_back {

		0%,
		50% {
			right: 105%;
			top: 80%;
		}

		80% {
			right: 48%;
			top: 80%;
		}

		90% {
			right: 48%;
			top: 12%;
		}

		100% {
			right: 0;
			top: 12%;
		}
	}

	@keyframes rightBottomMove_back {

		0%,
		50% {
			right: 105%;
			bottom: 80%;
		}

		80% {
			right: 46%;
			bottom: 80%;
		}

		90% {
			right: 46%;
			bottom: 12%;
		}

		100% {
			right: 0;
			bottom: 12%;
		}
	}

	@keyframes animate_bg {
		0% {
			background-position: 0%, 100%;
		}

		25% {
			background-position: 100%, 50%;
		}

		100% {
			background-position: 0%, 50%;
		}
	}

	.flow-box {
		width: 100%;
		height: 100%;

		.flow-bottom-data {
			position: absolute;
			bottom: 10%;
			border-top: 1px solid $border_bt;
			width: 90%;
			padding-top: 10px;
			left: 5%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			font-size: 28rpx;

			.bottom-item {
				display: flex;
				align-items: center;
			}

			.num {
				font-size: 28rpx;
				margin-left: 10rpx;
				color: #333;
			}
		}

		.flow-data {
			position: absolute;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			.percent {
				font-size: 24rpx;
			}

			.num {
				color: #333;
				font-size: 28rpx;
			}
		}

		.left-top-data {
			left: 6%;
			top: 2%;
			width: 100%;
			align-items: start !important;
		}

		.right-top-data {
			right: 6%;
			top: 6%;
			width: 100%;
			align-items: end !important;
		}

		.left-bottom-data {
			left: 6%;
			bottom: 28%;
			width: 100%;
			align-items: start !important;
		}

		.right-bottom-data {
			right: 6%;
			bottom: 28%;
			width: 100%;
			align-items: end !important;
		}

		// 流程动图样式
		.flow-container {
			height: 45%;
			width: 65%;
			margin: 15% auto;
			position: relative;

			.flow-icon {
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 80rpx;

				.iconfont {
					font-size: 60rpx;
				}
			}

			.left-top-icon {
				color: #4b6cdd;
				left: -17%;
				top: -6%;
				border: 4rpx solid;
			}

			.right-top-icon {
				color: #54b6af;
				right: -17%;
				top: -6%;
				border: 4rpx solid;

				.iconfont {
					font-size: 50rpx !important;
				}
			}

			.left-bottom-icon {
				color: #60bc7e;
				bottom: -5%;
				left: -17%;
				border: 4rpx solid;
			}

			.right-bottom-icon {
				color: #e56d5e;
				bottom: -6%;
				right: -17%;
				border: 4rpx solid;

				.iconfont {
					font-size: 50rpx !important;
				}
			}

			.center-icon {
				color: #eba63f;
				left: 43%;
				top: 35%;
				background-color: #fceec7;
				padding: 10rpx;
			}

			.flow-item {
				width: 50%;
				height: 50%;
				display: inline-block;
				float: left;
				position: relative;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}

				.move-item:before {
					content: "";
					position: absolute;
					right: -25%;
					top: -25%;
					width: calc(100% + 50%);
					height: calc(100% + 50%);
					border-radius: 50%;
					z-index: -1;
					background-size: 300%;
					animation: animate_bg 5s infinite;
				}

				.move-item {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #fff;
					position: absolute;
				}

				.left-top-move {
					animation: leftTopMove 4s 0s infinite linear;
				}

				.left-bottom-move {
					animation: leftBottomMove 4s 0s infinite linear;
				}

				.right-bottom-move {
					animation: rightBottomMove_back 4s -6s infinite linear;
				}

				.right-top-move {
					animation: rightTopMove_back 4s -6s infinite linear;
				}

				.right-top-move:before {
					background-image: linear-gradient(60deg,
							rgb(247, 162, 25),
							rgb(15, 185, 176));
				}

				.left-top-move:before {
					background-image: linear-gradient(60deg,
							rgb(65, 109, 228),
							rgb(247, 162, 25));
				}

				.left-bottom-move:before {
					background-image: linear-gradient(60deg,
							rgb(96, 188, 126),
							rgb(247, 162, 25));
				}

				.right-bottom-move:before {
					background-image: linear-gradient(60deg,
							rgb(229, 109, 94),
							rgb(247, 162, 25));
				}
			}
		}
	}
</style>